﻿<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>带自定义验证的表单</title>
    <meta charset="utf-8" />
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <style type="text/css">
        .form-group {
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        function Controller($scope) {
            $scope.Name = "";
            $scope.BirthDay = null;
            $scope.Phone = "";
            $scope.saveForm = function () {
                alert("Saved!")
            };
            $scope.cancelForm = function () {
                alert("Canceled!")
            };
            $scope.loadForm = function () {
                $scope.Name = "Xiaoqiang";
                $scope.BirthDay = new Date(2000, 10, 10);
                $scope.Phone = "123 4567 8910";

            };
            $scope.hello = function () {
                alert(["Hello,", $scope.Name].join(""));
            };
            $scope.getBirthDay = function () {
                return $scope.BirthDay == null ? "1900-01-01" : $scope.BirthDay.toDateString();
            }

            $scope.isBadPhone = function () {
                return $scope.Phone!=null&&$scope.Phone.length>0&&!/^\s*(\+[0-9]+\s?)?([0-9]+\-)?([0-9]+\s?)*$/.test($scope.Phone);
            }
        };

        var app = angular.module("myApp",[]);
        app.controller("Controller",  Controller);
    </script>
</head>
<body ng-controller="Controller" class="container-fluid text-center">

    <form class="form form-horizontal ">

        <header>
            <h3 class="form-title" id="title">Personal Information</h3>
        </header>
        <div class="form-group">
            <label for="name">Name:</label>
            <input id="name" class="form-control" type="text" ng-model="Name" maxlength="10" placeholder="Fill your name here!But,max 10 characters!" />
        </div>
        <div class="form-group">
            <label for="birthday">Birth Day:</label>
            <input id="birthday" class="form-control" type="date" ng-model="BirthDay" maxlength="10" placeholder="Fill your name birth day!" />
        </div>
        <div class="form-group">
            <label for="phone">Phone/Mobile:</label>
            <input id="phone" class="form-control" type="tel" ng-model="Phone" maxlength="15" placeholder="Fill your phone number or mobile phone number!" />
            <div class="text-danger" ng-if="isBadPhone()">
                Invalid phone number!
            </div>
        </div>
        <section class="form-tools">
            <button class="btn btn-primary" ng-click="saveForm()" type="button">Save</button>
            <button class="btn btn-default" ng-click="loadForm()" type="button">Load</button>
            <button class="btn btn-default" ng-click="hello()" type="button">Say Hello</button>
            <button class="btn btn-default" ng-click="cancelForm()" type="button">Cancel</button>
        </section>
        
        <footer class="bottom" style="position:absolute;bottom:6em;left:0;right:0;">
            <h4>Hello,{{Name||"Guest"}},</h4>
            <h5>you birth on {{getBirthDay()}},</h5>
            <h5>and,your phone number is {{Phone||"00-00"}}.</h5>
            <div class="text-warning bg-danger">Welcome to the hell!</div>
        </footer>
    </form>

    
</body>
</html>
